<template>

	<view class="content">

		<!-- <u-button type="success" lang="zh_CN" @click="wxLogin" :custom-style="btnStyle" :ripple="true" shape="circle">
			微信登录</u-button>
		<u-button type="success" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" shape="circle">
			获取手机号码
		</u-button> -->

		<view class="dialog_warp" v-if="bindPhoneVisible">
			<view class="masker"> </view>
			<view class="dialog_body">
				<image class="close_icon" src="../../static/images/icons/icon-close@2x.png" @click="closeBindPhone"
					mode=""></image>
				<view class="title">
					<image src="../../static/images/icons/icon-tips@2x.png" mode=""></image>
					绑定手机
				</view>
				<view class="input_box phone_box">
					<view class="left">
						<image src="../../static/images/icons/icon-phone@2x.png" mode="" v-if="!mobile"></image>
						<image src="../../static/images/icons/icon-acitve-phone@2x.png" mode="" v-else></image>
						<u-input v-model="mobile" placeholder="请输入手机号" @blur="phoneBlur" @input="phoneInput"
							type="number" maxlength="11" />
					</view>
					<view class="error" v-if="moblieError">{{moblieError}} </view>
				</view>


				<view class="input_box code_box">
					<view class="left">
						<image src="../../static/images/icons/icon-pass.png" mode="" v-if="!codeValue"></image>
						<image src="../../static/images/icons/icon-active-pass@2x.png" mode="" v-else></image>
						<u-input v-model="codeValue" placeholder="请输入验证码" type="number" />
					</view>
					<view class="verification_code">
						<u-verification-code :seconds="60" change-text="Xs重新发送" @end="end" @start="start" ref="uCode"
							@change="codeChange"></u-verification-code>
						<view class="_btn" @tap="getCodeHandle">{{codeTips}}</view>
					</view>
				</view>

				<view class="submit_btn" @click="confirmBindPhoneFn">确定</view>

			</view>

		</view>

	</view>


</template>

<script>
	import {
		sendMsmForBindingPhone,
		bindingPhone,
	} from "../../api/login";
	import {
		wx_login,
		wx_getUserProfile
	} from "../../api/wxApi.js";
	export default {
		data() {
			return {
				code: '';
				mobile: '',
				codeValue: '',
				moblieError: '',
				bindPhoneVisible: true,
				model: {},
				codeTips: '',
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					code: [{
							required: true,
							message: '请输入验证码',
							trigger: ['change', 'blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change', 'blur'],
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['change', 'blur'],
						},
						{
							// 正则不能含有两边的引号
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
							message: '需同时含有字母和数字，长度在6-12之间',
							trigger: ['change', 'blur'],
						}
					],

				},

			}
		},
		async onLoad(option) {
			this.code = await wx_login();
			console.log(option, '登录页入参');


			// wx.login({
			// 	success (res2) {
			// 		console.log('登录！1231' , res2)
			// 	}
			// 	})
		},
		methods: {

			//绑定手机号
			confirmBindPhoneFn() {
				if (this.mobile && this.codeValue) {
					bindingPhone({
						code: this.codeValue,
						phoneNum: this.mobile
					}).then(res => {
						uni.showToast({
							title: '绑定成功！',
							duration: 2000
						});
						this.toLogin(res)
					})
				} else {
					if (this.mobile == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入手机号',
							duration: 2000
						});
						return
					}
					if (this.codeValue == '') {
						uni.showToast({
							icon: "none",
							title: '请输入验证码',
							duration: 2000
						});
						return
					}
				}
			},
			codeChange(text) {
				this.codeTips = text;
			},
			//获取验证码
			getCodeHandle() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})

					sendMsmForBindingPhone(this.mobile).then(res => {
						if (res.code == 200) {
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.hideLoading();
							// 通知验证码组件内部开始倒计时
							this.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						}
					})


				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				this.$u.toast('倒计时结束');
			},
			start() {
				this.$u.toast('倒计时开始');
			},
			maskClick(e) {
				console.log(e)
			},
			closeBindPhone() {
				this.bindPhoneVisible = false
			},
			phoneBlur() {
				if (this.mobile == '') {
					this.moblieError = '请输入手机号'
					return
				}
				if (!this.$u.test.mobile(this.mobile)) {
					this.moblieError = '手机号码不正确'
					return
				}
				this.moblieError = ''
			},
			phoneInput() {

			},
			toPage(page) {
				console.log(page)
				uni.navigateTo({
					url: page
				});
			},
			async wxLogin() {
				console.log(1);
				let _this = this;
				console.log(this.code);
				console.log(2);
				if (this.code) {
				    wx_getUserProfile().then(res => {
				        console.log(res);
				        if (res2.code) {
				            //发起网络请求
				            console.log('登录！', res2)
				            let date = {
				                code: res2.code,
				                rawData: res.rawData,
				                signature: res.signature,
				                wxUserInfoRequest: {
				                    iv: res.iv,
				                    encryptedData: res.encryptedData,
				                }
				            }
				            loginForWechat(date).then(res3 => {
				                console.log(res3, '登录接口请求')
				                _this.toLogin(res3)
				            })
				        } else {
				            console.log('登录失败！' + res2.errMsg)
				        }
				    })
				} else {
				    this.code = await wx_login();
				    console.log('登录失败！')
				}
			},
			//获取手机号码
			getPhoneNumber(e) {
				let date = {
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData,
				}
				getUserPhoneForWechat(date).then(res => {
					console.log(res, '获取手机号码请求')
					this.toLogin(res)
				})

			},

			//登录后的操作
			toLogin(res) {
				console.log(res, '===rrrr')
				uni.setStorageSync('userInfo', res.result);
				uni.setStorageSync('token', res.result.token);

				if (res && res.result.pdTenants.phoneNum) {
					uni.navigateTo({
						url: '../index/index'
					})
				} else {
					this.bindPhoneVisible = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dialog_warp {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		top: 0;
		z-index: 77;
		width: 100%;
		height: 100%;
		padding: 0rpx 30rpx;

		.error {
			font-size: 24rpx;
			font-weight: 400;
			color: #FABA30;
		}

		.masker {
			position: absolute;
			width: 100%;
			height: 100%;
			background-color: #0000007a;
			z-index: 0;
		}

		.dialog_body {
			position: relative;
			z-index: 2;
			width: 660rpx;
			height: 558rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			background-color: #FFFFFF;
			margin-top: -100rpx;

			.close_icon {
				position: absolute;
				right: 42rpx;
				top: 52rpx;
				width: 32rpx;
				height: 32rpx;
			}

			.title {
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				font-size: 36rpx;
				color: #000000;
				margin-top: 44rpx;
				margin-bottom: 66rpx;

				image {
					margin-right: 24rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

			.input_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 610rpx;
				border-bottom: 2rpx solid #F1F1F1;
				margin: 10rpx auto;

				.left {
					display: flex;
					align-items: center;
				}

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 18rpx;
				}

				.phone_input {}
			}

			.code_box {
				margin-top: 50rpx;
				margin-bottom: 66rpx;

				._btn {
					font-size: 28rpx;
					font-weight: 400;
					color: #0A348B;
				}
			}

			.submit_btn {
				width: 610rpx;
				height: 90rpx;
				background: #0A348B;
				border-radius: 20rpx;
				font-weight: 400;
				color: #FFFFFF;
				font-size: 34rpx;
				text-align: center;
				line-height: 90rpx;
				margin: 0rpx auto;
			}



		}
	}
</style>
